<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="top-file">
			<el-form size="small" :inline="true" ref="form" :model="form">
				<el-form-item>
					<el-select v-model="form.selectV1" placeholder="请选择">
						<el-option label="不限" value="1"></el-option>
						<el-option label="文字名称" value="2"></el-option>
						<el-option label="文字名称" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="form.selectV2" placeholder="请选择">
						<el-option label="不限" value="1"></el-option>
						<el-option label="文字名称" value="2"></el-option>
						<el-option label="文字名称" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="form.selectV3" placeholder="请选择">
						<el-option label="不限" value="1"></el-option>
						<el-option label="文字名称" value="2"></el-option>
						<el-option label="文字名称" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="form.selectV4" placeholder="请选择">
						<el-option label="不限" value="1"></el-option>
						<el-option label="文字名称" value="2"></el-option>
						<el-option label="文字名称" value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<div class="file-head flex-center justify-zBetween">
			<div class="day-box">
				<div class="hd">今日,</div>
				<div class="day-v">{{nowDate}}，欢迎您</div>
			</div>
			<ul class="top-data flex-center">
				<li >
					<div @click="openCenter" class="data-flex flex-center">
						<img src="../../assets/images/er/user-cc.png">
						<div class="flex_bd">
							<div class="v">
								<span class="text-yellow" v-if="fileData.data1>10 && fileData.data1<=50">{{fileData.data1}}</span>
								<span class="text-red" v-else-if="fileData.data1>50">{{fileData.data1}}</span>
								<span class="text-green" v-else>{{fileData.data1}}</span>
							</div>
							<div class="text">待处理</div>
						</div>
					</div>
				</li>
				<li>
					<div @click="openCenter" class="data-flex flex-center">
						<img src="../../assets/images/er/user-cc.png">
						<div class="flex_bd">
							<div class="v">
								<span class="text-yellow" v-if="fileData.data2>10 && fileData.data2<=50">{{fileData.data2}}</span>
								<span class="text-red" v-else-if="fileData.data2>50">{{fileData.data2}}</span>
								<span class="text-green" v-else>{{fileData.data2}}</span>
							</div>
							<div class="text">待处理</div>
						</div>
					</div>
				</li>
				<li>
					<div @click="openCenter" class="data-flex flex-center">
						<img src="../../assets/images/er/user-cc.png">
						<div class="flex_bd">
							<div class="v">
								<span class="text-yellow" v-if="fileData.data3>10 && fileData.data3<=50">{{fileData.data3}}</span>
								<span class="text-red" v-else-if="fileData.data3>50">{{fileData.data3}}</span>
								<span class="text-green" v-else>{{fileData.data3}}</span>
							</div>
							<div class="text">待处理</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="file-main">
			<el-row :gutter="16">
				<el-col :span="8">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">课程列表</div>
						</div>
						<div class="bs-panel_bd">
							<div class="first-cell flex-center">
								<div class="fir-cc">
									<div class="fir-val"><span>7829</span>个</div>
								</div>
								<div class="fir-echart">
									<div id="echart1"></div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">档案总数</div>
						</div>
						<div class="bs-panel_bd">
							<div class="first-cell flex-center">
								<div class="fir-cc">
									<div class="fir-val"><span>7829</span>个</div>
								</div>
								<div class="fir-echart">
									<div id="echart2"></div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">标题名称</div>
						</div>
						<div class="bs-panel_bd">
							<div class="first-cell ">
								<div class="bs-tip">本周299次</div>
								<div class="ec-box" id="echart3"></div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">近五年档案数量</div>
						</div>
						<div class="bs-panel_bd">
							<div class="dv-head"><span class="lv">7,300</span><span>文字名称</span></div>
							<div class="dv-progress">
								<div class="dv-bar" style="background-color: #4658da;width: 30%;"></div>
								<div class="dv-bar" style="background-color: #fd4d89;width: 30%;"></div>
								<div class="dv-bar" style="background-color: #0ebfac;width: 15%;"></div>
								<div class="dv-bar" style="background-color: #ffb500;width: 10%;"></div>
								<div class="dv-bar" style="background-color: #383f45;width: 15%;"></div>
							</div>
							<ul class="dv-list">
								<li>
									<div class="dv-head">
										<div class="dv-dot" style="background-color: #4658da;"></div>
										<div class="dv-tit">文字内容</div>
										<div class="dv-n">1400</div>
									</div>
								</li>
								<li>
									<div class="dv-head">
										<div class="dv-dot" style="background-color: #fd4d89;"></div>
										<div class="dv-tit">文字内容</div>
										<div class="dv-n">1400</div>
									</div>
								</li>
								<li>
									<div class="dv-head">
										<div class="dv-dot" style="background-color: #0ebfac;"></div>
										<div class="dv-tit">文字内容</div>
										<div class="dv-n">1400</div>
									</div>
								</li>
								<li>
									<div class="dv-head">
										<div class="dv-dot" style="background-color: #ffb500;"></div>
										<div class="dv-tit">文字内容</div>
										<div class="dv-n">1400</div>
									</div>
								</li>
								<li>
									<div class="dv-head">
										<div class="dv-dot" style="background-color: #383f45;"></div>
										<div class="dv-tit">文字内容</div>
										<div class="dv-n">1400</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">近五年档案数量</div>
						</div>
						<div class="bs-panel_bd">
							<div class="x" id="echart4"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">档案入库趋势</div>
						</div>
						<div class="bs-panel_bd">
							<div id="echart5"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="bs-panel">
						<div class="bs-panel_hd flex-center justify-zBetween">
							<div class="bs-tt">通知公告</div>
							<div class="bs-arrow flex-center">
								<i class="el-icon-arrow-left "></i>
								<i class="el-icon-arrow-right "></i>
							</div>
						</div>
						<div class="bs-panel_bd">
							<swiper :options="swiperOption" ref="mySwiper">
								<swiper-slide v-for="(item,index) in 4" :key="index">
									<ul class="notice-list">
										<li v-for="(item,index) in noticelist" :key="item" @mouseover="selectStyle(index)"
											:class="nactive == index ?'active':''" >
											<div class="n-head flex-center">
												<div class="n-title">国货蜂花否认倒闭</div>
												<div class="n-time">2020-10-10</div>
											</div>
											<div class="n-intro line-3">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</div>
										</li>
									</ul>
								</swiper-slide>
							</swiper>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">案卷占比</div>
						</div>
						<div class="bs-panel_bd">
							<div id="echart6"></div>
						</div>
					</div>
					<div class="bs-panel">
						<div class="bs-rili_hd">
							<div class="nyr">{{nowDate}}</div>
							<div class="month">{{week}}~</div>
						</div>
						<div class="bs-panel_bd">
						<el-calendar style="height: 250px;" v-model="nowdate">
							<template
								slot="dateCell"
								slot-scope="{date, data}">
								<div class="data-inbox" style="width:100%;height: 100%;">
									<div v-for="(item,index) in activeday" :key="index" >
										<el-badge v-if="data.day == item.dat" is-dot :type="item.status"></el-badge>
									</div>
									<div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
								</div>
							</template>
						</el-calendar>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">下载记录</div>
						</div>
						<div class="bs-panel_bd">
							<el-table
							:data="tableData"
							height="296"
							style="width: 100%">
							<el-table-column
								prop="cate"
								width="160"
								label="分类">
								<template slot-scope="scope">
									<div class="file-style flex-center">
										<img :src="scope.row.icon" >
										<div class="flex_bd">
											{{scope.row.cate}}
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column
							prop="people"
							label="人员">
							</el-table-column>
							<el-table-column
							prop="time"
							label="时间">
							</el-table-column>
							</el-table>
						</div>
					</div>
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">标题名</div>
						</div>
						<div class="bs-panel_bd">
							<div class="ecx-cell flex-center justify-center">
								<div id="echart71"></div>
								<div class="ec-text">
									<div>办理土地使用证</div>
									<div>25%</div>
								</div>
							</div>
							<div class="ecx-cell flex-center justify-center">
								<div id="echart72"></div>
								<div class="ec-text">
									<div>办理土地使用证</div>
									<div>25%</div>
								</div>
							</div>
							<div class="ecx-cell flex-center justify-center">
								<div id="echart73"></div>
								<div class="ec-text">
									<div>办理土地使用证</div>
									<div>25%</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">档案预警</div>
						</div>
						<div class="bs-panel_bd">
							<el-row class="dw-row">
								<el-col :span="8">
									<div class="dw-data">
										<img src="../../assets/images/er/bl3.png">
										<div class="val">291</div>
										<div class="text">待处理</div>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="dw-data">
										<img src="../../assets/images/er/bl2.png">
										<div class="val">291</div>
										<div class="text">待处理</div>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="dw-data">
										<img src="../../assets/images/er/bl1.png">
										<div class="val">291</div>
										<div class="text">待处理</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">热门搜索</div>
						</div>
						<div class="bs-panel_bd">
							<ul class="hotk-list">
								<li v-for="item in 4" :key="item">
									<div class="h-title ellipsis">国货蜂花否认倒闭</div>
									<div class="h-n">200次</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">标题名</div>
						</div>
						<div class="bs-panel_bd">
							<div id="echart8"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="24">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">标题名</div>
						</div>
						<div class="bs-panel_bd">
							<div class="btm-ecahrt flex-center">
								<div class="left-ecahrt" id="echart9"></div>
								<div class="flex_bd">
									<div class="left-ecahrt" id="echart10"></div>
								</div>
								<div class="right-ecahrt">
									<div class="sex-cells">
										<div class="sex-cell flex">
											<div class="label">男性</div>
											<div class="sex-cell_bar">
												<div class="sexs flex-col">
													<img src="../../assets/images/er/boy.png">
													<img src="../../assets/images/er/boy.png">
													<img src="../../assets/images/er/boy.png">
													<img src="../../assets/images/er/boy.png">
													<img src="../../assets/images/er/boy.png">
													<img src="../../assets/images/er/boy.png" style="opacity: .5;">
													<img src="../../assets/images/er/boy.png" style="opacity: .5;">
													<img src="../../assets/images/er/boy.png" style="opacity: .5;">
													<img src="../../assets/images/er/boy.png" style="opacity: .5;">
												</div>
												<div class="val">90人</div>
											</div>
										</div>
										<div class="sex-cell flex">
											<div class="label">女性</div>
											<div class="sex-cell_bar">
												<div class="sexs flex-col">
													<img src="../../assets/images/er/girl.png">
													<img src="../../assets/images/er/girl.png">
													<img src="../../assets/images/er/girl.png">
													<img src="../../assets/images/er/girl.png">
													<img src="../../assets/images/er/girl.png">
													<img src="../../assets/images/er/girl.png" style="opacity: .5;">
													<img src="../../assets/images/er/girl.png" style="opacity: .5;">
													<img src="../../assets/images/er/girl.png" style="opacity: .5;">
													<img src="../../assets/images/er/girl.png" style="opacity: .5;">
												</div>
												<div class="val">90人</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				// 待处理 数据
				fileData:{
					data1:6,
					data2:16,
					data3:55
				},
				nowdate:"",
				activeday:[
					{
						dat:'2021-11-12',
						coun:'1',
						status:"success"
					},
					{
						dat:'2021-11-14',
						coun:'1',
						status:"danger"
					},
					{
						dat:'2021-11-15',
						coun:'1',
						status:"danger"
					}
				],
				tableData:[
					{
						icon:require('../../assets/images/er/pdf.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},
					{
						icon:require('../../assets/images/er/words.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},
					{
						icon:require('../../assets/images/er/pdf.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},
					{
						icon:require('../../assets/images/er/pdf.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},
					{
						icon:require('../../assets/images/er/pdf.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},{
						icon:require('../../assets/images/er/pdf.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},
					{
						icon:require('../../assets/images/er/words.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},
					{
						icon:require('../../assets/images/er/pdf.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},
					{
						icon:require('../../assets/images/er/pdf.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					},
					{
						icon:require('../../assets/images/er/pdf.png'),
						cate:'名称1.pdf',
						people:'张三',
						time:'2010.02.0215:00',
					}
				],
				form: {
					selectV1: '1',
					selectV2: '1',
					selectV3: '1',
					selectV4: '1',
				},
				nowDate: "2020年11月18日",
				week:'',
				activeName: 'first',
				lists: [{
					title: '我是标题我是标题',
				}, {
					title: '我是标题我是标题',
				}, {
					title: '我是标题我是标题',
				}, {
					title: '我是标题我是标题',
				}, {
					title: '我是标题我是标题',
				}, ],
				bg: require('../../assets/images/bg4.jpg'),
				skin: "skin3",
				swiperOption: {
					loop: true,
					observer: true,
					observeParents: true,
					slidesPerView: 'auto',
					centeredSlides: true,
					centeredSlidesBounds: true,
					navigation: {
						nextEl: '.el-icon-arrow-right',
						prevEl: '.el-icon-arrow-left',
					},
				},
				nactive:0,
				noticelist:[
					{
						title:'国货蜂花否认倒闭'
					},
					{
						title:'上班摸鱼被通报上热搜，做完工作摸鱼'
					},
					{
						title:'国货蜂花否认倒闭'
					},
					{
						title:'上班摸鱼被通报上热搜，做完工作摸鱼'
					},
					{
						title:'国货蜂花否认倒闭'
					},
					{
						title:'上班摸鱼被通报上热搜，做完工作摸鱼'
					}
				]
			}
		},
		created() {
			this.$nextTick(() => {
				this.drawLine1()
				this.drawLine2()
				this.drawLine3()
				this.drawLine4()
				this.drawLine5()
				this.drawLine6()
				this.drawLine8()
				this.drawLine71()
				this.drawLine72()
				this.drawLine73()
				this.drawLine9()
				this.drawLine10()
			})
		},
		mounted() {
			let _this = this;
			_this.currentTime();
			window.onresize = function() {
				_this.drawLine1()
				_this.drawLine2()
				_this.drawLine3()
				_this.drawLine4()
				_this.drawLine5()
				_this.drawLine6()
				_this.drawLine8()
				_this.drawLine71()
				_this.drawLine72()
				_this.drawLine73()
				_this.drawLine9()
				_this.drawLine10()
			}
		},
		beforeDestroy() {
			if (this.formatDate) {
				clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
			}
		},
		methods: {
			openCenter() {
				this.$message({
					message: '居中的文字',
					center: true
				});
			},
			selectStyle(index) {
				var _this = this;
				_this.nactive = index
			},
			drawLine1() {
				let myChart = this.$echarts.init(document.getElementById("echart1"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					grid: {
						left: '2%',
						right: '4%',
						bottom: '2%',
						top: '8%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月'],
						axisLine: {
							show: false,
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							show: false,
							textStyle: {
								color: '#666666',
							},
						},
					},

					yAxis: [{
						type: 'value',
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: false,
							textStyle: {
								color: '#666666',
							},
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#aab2c3',
							},
						},
					}, ],
					series: [{
						name: '调解成功',
						type: 'bar',
						barWidth: '12px',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#0d9ba8',
									},
									{
										offset: 1,
										color: '#0d9ba8',
									},
								]),
								barBorderRadius: [10, 10, 0, 0],
							},
						},
						data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
					}, ],

				});
				myChart.resize();
			},
			drawLine2() {
				let myChart = this.$echarts.init(document.getElementById("echart2"));
				// 绘制图表
				myChart.setOption({
					color: ['#ff9500', '#ae64ff', '#5567fe'],
					tooltip: {
						trigger: 'item'
					},
					legend: {
						icon: "circle",
						itemWidth: 6,
						type: 'scroll',
						orient: 'vertical',
						selectedMode: false, //图例点击失效
						left: '10%',
						top: 'center',
						textStyle: {
							color: '#222',
							fontSize: 12,
						},
					},
					series: [{
						name: '档案总数',
						type: 'pie',
						radius: ['60%', '80%'],
						center: ['76%', '50%'],
						roseType: 'radius',
						label: {
							show: false,
						},
						emphasis: {
							label: {
								show: false,
							},
						},
						itemStyle: {
							shadowBlur: 1,
							shadowColor: 2,
							shadowOffsetX: 5,
							shadowOffsetY: 5,
						},
						data: [{
							name: '标题名称1',
							value: 340
						}, {
							name: '标题名称2',
							value: 314
						}, {
							name: '标题名称3',
							value: 280
						}],
					}, ],
				});
				myChart.resize();
			},
			drawLine3() {
				let myChart = this.$echarts.init(document.getElementById("echart3"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '3%',
						left: '4%',
						right: '4%',
						bottom: '2%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
						axisLine: {
							show: false,
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
							interval: 0,
							textStyle: {
								color: '#666666',
							},
							margin: 10,
						},
						boundaryGap: false,
					}, ],
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							show: false,
							textStyle: {
								color: '#666',
							},
						},
						splitLine: {
							show: false,
						},
					}, ],
					series: [{
						name: 'S',
						type: 'line',
						data: [6, 5, 6, 7, 5, 8, 7],
						symbolSize: 0,
						symbol: 'circle',
						smooth: true,
						lineStyle: {
							color: '#0080ff',
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#0080ff',
								},
								{
									offset: 1,
									color: 'rgba(0,116,249,.1)',
								},
							]),
						},
						emphasis: {},
					}, ],
				});
				myChart.resize();
			},
			drawLine4() {
				let myChart = this.$echarts.init(document.getElementById("echart4"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					grid: {
						left: '2%',
						right: '4%',
						bottom: '5%',
						top: '5%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: ['标题名称', '标题名称', '标题名称', '标题名称', '标题名称'],
						axisLine: {
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#333333',
							},
						},
					},
					yAxis: [{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#333333',
							},
						},
						axisLine: {
							lineStyle: {
								color: '#aab2c3',
							},
						},
					}, ],
					series: [{
						name: '标题名称',
						type: 'bar',
						barWidth: '20px',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#417bff',
									},
									{
										offset: 1,
										color: '#417bff',
									},
								]),
								barBorderRadius: 2,
							},
						},
						data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
					}, ],

				});
				myChart.resize();
			},
			drawLine5() {
				let myChart = this.$echarts.init(document.getElementById("echart5"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '3%',
						left: '2%',
						right: '2%',
						bottom: '2%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['12-04', '12-05', '12-06', '12-07', '12-08', '12-08', '12-10'],
						axisLine: {
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#333333',
							},
						},
						boundaryGap: false,
					},
					yAxis: [{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#333333',
							},
						},
						axisLine: {
							lineStyle: {
								color: '#aab2c3',
							},
						},
					}, ],
					series: [{
						name: 'S',
						type: 'line',
						data: [1, 6, 5, 6, 7, 5, 8, 7],
						symbolSize: 8,
						symbol: 'circle',
						smooth: true,
						lineStyle: {
							color: '#0080ff',
							normal: {
								color: '#0080ff',
							}
						},
						itemStyle: {
							normal: {
								color: '#ffa400',
								borderColor: '#ffffff', //圆点透明 边框
								borderWidth: 2
							},

						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#0080ff',
								},
								{
									offset: 1,
									color: 'rgba(0,116,249,.1)',
								},
							]),
						},
						emphasis: {},
					}, ],
				});
				myChart.resize();
			},
			drawLine6() {
				let myChart = this.$echarts.init(document.getElementById("echart6"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {d}% <br/> {c}',
					},
					title: {
						text: '3246',
						subtext: '累计人数',
						x: 'center',
						y: '30%',
						textStyle: {
							fontSize: 24,
							fontWeight: 'normal',
							color: '#333',
						},
						subtextStyle: {
							fontSize: 13,
							fontWeight: 'normal',
							align: 'center',
							color: '#666',
						},
					},
					legend: {
						icon: "circle",
						orient: 'horizontal',
						data: ['种类1', '种类2', '种类3', '种类4'],
						left: 'center',
						bottom: '0',
						textStyle: {
							color: "#333"
						},
						itemGap: 20
					},
					series: [{
						type: 'pie',
						radius: ['50%', '70%'],
						center: ['50%', '40%'],
						color: ['#975fe4', '#1ba8b9', '#d7aa09', '#ef2322'],
						itemStyle: {
							normal: {
								borderWidth: 3,
								borderColor: 'rgba(255,255,255,.1)',
							},
						},
						data: [{
								value: 27,
								name: '种类1',
							},
							{
								value: 30,
								name: '种类2',
							},
							{
								value: 24,
								name: '种类3',
							},
							{
								value: 27,
								name: '种类4',
							},
						],
						labelLine: {
							normal: {
								show: false,
							},
						},
						label: {
							normal: {
								show: false,
								formatter: '{b|{b}}\n{hr|}\n{c|{c}%}',
							},
						},
					}, ],
				});
				myChart.resize();
			},
			drawLine71() {
				let myChart = this.$echarts.init(document.getElementById("echart71"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						left: '2%',
						right: '2%',
						bottom: '2%',
						top: '2%',
						containLabel: true,
					},
					series: [{
						name: 'Line 1',
						type: 'pie',
						clockWise: true,
						radius: ['60%', '80%'],
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						hoverAnimation: false,
						data: [{
							value: 50,
							name: '01',
							itemStyle: {
								normal: {
									color: "#fd5237",
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}, {
							name: '02',
							value: 50,
							itemStyle: {
								normal: {
									color: "#a7b2c2",
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}]
					}]
				});
				myChart.resize();
			},
			drawLine72() {
				let myChart = this.$echarts.init(document.getElementById("echart72"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						left: '2%',
						right: '2%',
						bottom: '2%',
						top: '2%',
						containLabel: true,
					},
					series: [{
						name: 'Line 1',
						type: 'pie',
						clockWise: true,
						radius: ['60%', '80%'],
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						hoverAnimation: false,
						data: [{
							value: 50,
							name: '01',
							itemStyle: {
								normal: {
									color: "#975fe4",
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}, {
							name: '02',
							value: 50,
							itemStyle: {
								normal: {
									color: "#a7b2c2",
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}]
					}]
				});
				myChart.resize();
			},
			drawLine73() {
				let myChart = this.$echarts.init(document.getElementById("echart73"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						left: '0%',
						right: '2%',
						bottom: '2%',
						top: '2%',
						containLabel: true,
					},
					series: [{
						name: 'Line 1',
						type: 'pie',
						clockWise: true,
						radius: ['60%', '80%'],
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						hoverAnimation: false,
						data: [{
							value: 50,
							name: '01',
							itemStyle: {
								normal: {
									color: "#1ba8b9",
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}, {
							name: '02',
							value: 50,
							itemStyle: {
								normal: {
									color: "#a7b2c2",
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}]
					}]
				});
				myChart.resize();
			},
			drawLine8() {
				let myChart = this.$echarts.init(document.getElementById("echart8"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {d}% <br/> {c}',
					},
					title: {
						text: '35%',
						x: 'center',
						y: '30%',
						textStyle: {
							fontSize: 24,
							fontWeight: 'normal',
							color: '#0080ff',
						},
					},
					legend: {
						icon: "circle",
						orient: 'horizontal',
						data: ['种类1', '种类2', '种类3', '种类4'],
						left: 'center',
						bottom: '0',
						textStyle: {
							color: "#333"
						},
						itemGap: 20
					},
					series: [{
						type: 'pie',
						radius: ['50%', '70%'],
						center: ['50%', '40%'],
						color: ['#975fe4', '#1ba8b9', '#d7aa09', '#ef2322'],
						itemStyle: {
							normal: {
								borderWidth: 3,
								borderColor: 'rgba(255,255,255,.1)',
							},
						},
						data: [{
								value: 27,
								name: '种类1',
							},
							{
								value: 30,
								name: '种类2',
							},
							{
								value: 24,
								name: '种类3',
							},
							{
								value: 27,
								name: '种类4',
							},
						],
						labelLine: {
							normal: {
								show: false,
							},
						},
						label: {
							normal: {
								show: false,
								formatter: '{b|{b}}\n{hr|}\n{c|{c}%}',
							},
						},
					}, ],
				});
				myChart.resize();
			},
			drawLine9() {
				let myChart = this.$echarts.init(document.getElementById("echart9"));
				// 绘制图表
				myChart.setOption({
					color: ['#ff9500', '#ae64ff', '#5567fe'],
					tooltip: {
						trigger: 'item'
					},
					legend: {
						icon: "circle",
						itemWidth: 6,
						type: 'scroll',
						orient: 'vertical',
						selectedMode: false, //图例点击失效
						right: '5%',
						top: 'center',
						textStyle: {
							color: '#222',
							fontSize: 12,
						},
					},
					series: [{
						name: '档案总数',
						type: 'pie',
						radius: ['60%', '80%'],
						center: ['30%', '50%'],
						roseType: 'radius',
						label: {
							show: false,
						},
						emphasis: {
							label: {
								show: false,
							},
						},
						itemStyle: {
							shadowBlur: 1,
							shadowColor: 2,
							shadowOffsetX: 5,
							shadowOffsetY: 5,
						},
						data: [{
							name: '标题名称1',
							value: 340
						}, {
							name: '标题名称2',
							value: 314
						}, {
							name: '标题名称3',
							value: 280
						}],
					}, ],
				});
				myChart.resize();
			},
			drawLine10() {
				let myChart = this.$echarts.init(document.getElementById("echart10"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					grid: {
						left: '2%',
						right: '4%',
						bottom: '5%',
						top: '5%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: ['标题名称', '标题名称', '标题名称', '标题名称', '标题名称', '标题名称', '标题名称'],
						axisLine: {
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#333333',
							},
						},
					},
					yAxis: [{
						type: 'value',
						splitLine: {
							show: false,
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							show: false,
							textStyle: {
								color: '#333333',
							},
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#aab2c3',
							},
						},
					}, ],
					series: [{
						name: '标题名称',
						type: 'bar',
						barWidth: '10px',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#417bff',
									},
									{
										offset: 1,
										color: '#417bff',
									},
								]),
								barBorderRadius: [10, 10, 0, 0],
							},
						},
						data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
					}, ],

				});
				myChart.resize();
			},
			currentTime() {
				setInterval(this.formatDate, 500);
			},
			formatDate() {
				let date = new Date();
				let year = date.getFullYear(); // 年
				let month = date.getMonth() + 1; // 月
				let day = date.getDate(); // 日
				let wk = date.getDay()
				let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				let week = weeks[wk]
				this.nowDate = `${year}年${month}月${day}日`;
				this.week = `${week}`;
			},
			getData(data1, data2) {
				this.bg = data1
				this.skin = data2
			},
		}
	}
</script>
